<template>
	<view class="container">
		<!-- 统一背景区域 -->
		<view class="main-background">
			<!-- 顶部导航栏 -->
			<view class="header">
				<view class="status-bar">
					
				</view>
				<view class="nav-bar">
					<view class="nav-left" @click="goToMessage">
						<image src="/static/index/消息中心.png" class="nav-icon"></image>
					</view>
					<text class="nav-title">首页</text>
					<view class="nav-right"></view>
				</view>
			</view>

			<!-- 位置/搜索栏 -->
			<view class="location-bar">
				<view class="location-input" @click="onLocationClick">
					<image src="/static/index/定位2.png" class="location-icon"></image>
					<text class="location-text">{{ userLocation.address }}</text>
					<view class="refresh-section" @click.stop="onRefreshLocation"><strong></strong>
						<image src="/static/index/刷新 (1).png" class="refresh-icon"></image>
						<text class="refresh-text">刷新</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 服务分类 - 独立白色卡片，只有上半部分与背景重合 -->
		<view class="service-section">
			<view class="service-grid">
				<view 
					class="service-item" 
					v-for="service in serviceCategories" 
					:key="service.id"
					@click="onServiceClick(service)"
				>
					<view class="service-icon" :class="service.iconClass">
						<image :src="service.icon" class="service-img"></image>

					</view>
					<text class="service-label">{{ service.name }}</text>
				</view>
			</view>
		</view>

		<!-- 附近加油站 -->
		<view class="gas-station-section">
			<view class="section-header">
				<view class="section-title">
					<text class="title-text">附近加油站</text>
					<text class="subtitle-text">根据您的位置推荐最近的加油站</text>
				</view>
				<text class="more-link" @click="onViewMoreNearbyStore">更多 ></text>
			</view>
			<view class="map-container">
				<map 
					id="homeMap"
					class="map-component" 
					:latitude="mapData.latitude" 
					:longitude="mapData.longitude"
					:markers="mapData.markers"
					:scale="mapData.scale"
					:show-location="true"
					:enable-zoom="true"
					:enable-scroll="true"
					:enable-rotate="true"
					:enable-3D="true"
					:enable-overlooking="false"
					@markertap="onMarkerTap"
					@regionchange="onRegionChange"
					@updated="onMapUpdated"
					@load="onMapLoad"
				></map>
			</view>
		</view>

		<!-- 优惠团购 -->
		<view class="group-buy-section">
			<view class="section-header">
				<view class="section-title">
					<text class="title-text">优惠团购</text>
					<text class="subtitle-text">钜惠袭来 为您的爱车续航</text>
				</view>
				<text class="more-link" @click="onViewMoreGroupBuy">更多 ></text>
			</view>
			<view class="group-buy-grid">
				<!-- 加载状态 -->
				<view class="loading-state" v-if="groupBuyLoading">
					<uni-load-more status="loading"></uni-load-more>
				</view>
				<!-- 团购列表 -->
				<view 
					class="group-buy-item" 
					v-for="activity in groupBuyActivities" 
					:key="activity.id"
					@click="onGroupBuyClick(activity)"
					v-else
				>
					<image :src="activity.image" class="group-buy-img" mode="aspectFill"></image>
					<text class="group-buy-text">{{ activity.title }}</text>
					<view class="group-buy-price">
						<text class="original-price">¥{{ activity.originalPrice }}</text>
						<text class="group-price">¥{{ activity.groupPrice }}</text>
					</view>
					<view class="group-buy-info">
						<text class="participants">{{ activity.participants }}人参与</text>
					</view>
				</view>
				<!-- 空状态 -->
				<view class="empty-state" v-if="!groupBuyLoading && groupBuyActivities.length === 0">
					<text>暂无团购活动</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// import CustomTabBar from '@/custom-tab-bar/custom-tab-bar.vue';
	export default {
		// components: {
		// 	CustomTabBar
		// },
		data() {
			return {
				// 用户位置信息
				userLocation: {
					address: '焦作市山阳区人民路32号',
					latitude: 35.2159,
					longitude: 113.2418
				},
				// 服务分类数据
				serviceCategories: [
					{
						id: 1,
						name: '车辆维修',
						icon: '/static/index/车辆维修1-01.png',
						iconClass: 'blue',
						type: 'repair',
						path: '/index-item/vehicle_repair/repair/repair',
						description: '专业车辆维修服务'
					},
					{
						id: 2,
						name: '汽车保养',
						icon: '/static/index/保养.png',
						iconClass: 'orange',
						type: 'maintenance',
						path: '/index-item/maintenance/index/index',
						description: '定期保养维护服务'
					},
					{
						id: 3,
						name: '专业洗车',
						icon: '/static/index/洗车.png',
						iconClass: 'green',
						type: 'carwash',
						path: '/index-item/CarWash/index',
						description: '专业洗车美容服务'
					},
					{
						id: 4,
						name: '就近加油',
						icon: '/static/index/加油枪 (1).png',
						iconClass: 'light-blue',
						type: 'gas',
						path: '/index-item/gas-station/oiling',
						description: '附近加油站查询'
					}
				],
				// 团购活动数据
				groupBuyActivities: [],
				// 团购加载状态
				groupBuyLoading: false,
				// API基础地址
				baseUrl: 'http://localhost:9201',
				// 是否启用真实API
				useRealApi: true,
				// 地图数据
				mapData: {
					latitude: 35.2159, // 焦作市纬度
					longitude: 113.2418, // 焦作市经度
					scale: 14, // 地图缩放级别
					markers: [
						{
							id: 1,
							latitude: 35.2159,
							longitude: 113.2418,
							title: '焦作市政府',
							iconPath: '/static/index/定位2.png',
							width: 32,
							height: 32,
							type: 'government'
						},
						{
							id: 2,
							latitude: 35.2200,
							longitude: 113.2450,
							title: '万达广场',
							iconPath: '/static/index/定位2.png',
							width: 32,
							height: 32,
							type: 'shopping'
						},
						{
							id: 3,
							latitude: 35.2100,
							longitude: 113.2380,
							title: '焦作大学',
							iconPath: '/static/index/定位2.png',
							width: 32,
							height: 32,
							type: 'education'
						}
					]
				},
				// 地图上下文
				mapContext: null
			}
		},
		onLoad() {
			// 页面加载时获取团购数据
			this.loadGroupBuyActivities();
			// 测试API连接状态
			this.testApiConnection();
			
			// 启动定时器检查数据更新
			this.startDataCheckTimer();
		},
		onUnload() {
			// 页面卸载时清除定时器
			if (this.dataCheckTimer) {
				clearInterval(this.dataCheckTimer);
				this.dataCheckTimer = null;
			}
		},
		onShow() {
			// 页面显示时刷新团购数据（从其他页面返回时）
			// 检查全局数据更新标记
			const app = getApp();
			
			if (app.globalData && app.globalData.groupBuyDataUpdated) {
				// 直接更新对应团购的参与人数
				const activity = this.groupBuyActivities.find(item => item.id == app.globalData.updatedGroupBuyId);
				if (activity) {
					activity.participants = app.globalData.updatedParticipants;
					// 强制触发视图更新
					this.$forceUpdate();
				} else {
					// 如果找不到对应活动，则刷新整个列表
					this.loadGroupBuyActivities();
				}
				
				// 清除更新标记
				app.globalData.groupBuyDataUpdated = false;
				app.globalData.updatedGroupBuyId = null;
				app.globalData.updatedParticipants = null;
			}
		},
		methods: {
			// 加载团购活动数据
			async loadGroupBuyActivities() {
				this.groupBuyLoading = true;
				try {
					// 如果禁用真实API，直接使用模拟数据
					if (!this.useRealApi) {
						this.groupBuyActivities = this.getMockGroupBuyData();
						return;
					}
					
					// 调用API接口
					const response = await this.getGroupBuyingListApi({
						pageNum: 1,
						pageSize: 4 // 首页只显示4个
					});
					
					// 处理API返回的数据结构
					let dataList = [];
					if (response && response.code && response.code !== 200) {
						throw new Error(response.msg || 'API调用失败');
					}
					
					if (response && response.rows) {
						dataList = response.rows;
					} else if (response && Array.isArray(response)) {
						dataList = response;
					} else if (response && response.data) {
						dataList = response.data;
					} else {
						throw new Error('API返回数据格式错误');
					}
					
					// 过滤未过期的数据并转换格式
					const validData = dataList
						.filter(item => !this.isExpired(item.endTime))
						.slice(0, 4) // 只取前4个
						.map(item => this.transformGroupBuyData(item));
					
					this.groupBuyActivities = validData;
					
				} catch (error) {
					console.error('加载团购活动失败:', error);
					// 使用模拟数据作为降级
					this.groupBuyActivities = this.getMockGroupBuyData();
				} finally {
					this.groupBuyLoading = false;
				}
			},
			
			// API调用方法
			getGroupBuyingListApi(params) {
				return new Promise((resolve, reject) => {
					const token = uni.getStorageSync('token') || uni.getStorageSync('access_token');
					uni.request({
						url: `${this.baseUrl}/system/buying/public/list`,
						method: 'GET',
						data: {
							pageNum: params.pageNum || 1,
							pageSize: params.pageSize || 10,
							title: params.title || '',
							deleted: 0 // 只查询未删除的数据
						},
						header: {
							'Content-Type': 'application/json',
							'Authorization': token ? `Bearer ${token}` : ''
						},
						success: (res) => {
							if (res.statusCode === 200) {
								resolve(res.data);
							} else if (res.statusCode === 401) {
								reject(new Error('未授权，请先登录'));
							} else if (res.statusCode === 403) {
								reject(new Error('权限不足'));
							} else if (res.statusCode === 404) {
								reject(new Error('接口不存在'));
							} else {
								reject(new Error(`请求失败: ${res.statusCode} - ${res.data?.msg || '未知错误'}`));
							}
						},
						fail: (err) => {
							reject(err);
						}
					});
				});
			},
			
			// 转换团购数据格式
			transformGroupBuyData(item) {
				return {
					id: item.id,
					title: item.title || '团购活动',
					image: item.img || item.url || '/static/index/Snipaste_2025-09-03_22-46-30.jpg',
					originalPrice: item.originalPrice || item.Oprice || 0,
					groupPrice: item.presentPrice || item.price || 0,
					participants: item.participants || 0, // 使用实际的参与人数字段
					status: 'active',
					path: `/index-item/GroupDeal/DiscountInfo?id=${item.id}`,
					description: item.content || item.description || '专业汽车服务'
				};
			},
			
			// 检查是否过期
			isExpired(endTime) {
				if (!endTime) return false;
				const now = new Date();
				const end = new Date(endTime);
				return now > end;
			},
			
			// 获取模拟团购数据
			getMockGroupBuyData() {
				return [
					{
						id: 1,
						title: '汽车惠民活动走进社区',
						image: '/static/index/Snipaste_2025-09-03_22-46-30.jpg',
						originalPrice: 299,
						groupPrice: 199,
						participants: 128,
						status: 'active',
						path: '/index-item/GroupDeal/DiscountInfo?id=1',
						description: '专业汽车保养服务，原价299元，团购价199元'
					},
					{
						id: 2,
						title: '汽车惠民活动走进企业',
						image: '/static/index/Snipaste_2025-09-03_22-46-43.jpg',
						originalPrice: 399,
						groupPrice: 299,
						participants: 89,
						status: 'active',
						path: '/index-item/GroupDeal/DiscountInfo?id=2',
						description: '企业团购优惠，专业维修服务'
					},
					{
						id: 3,
						title: '汽车惠民活动走进学校',
						image: '/static/index/Snipaste_2025-09-03_22-46-30.jpg',
						originalPrice: 199,
						groupPrice: 149,
						participants: 256,
						status: 'active',
						path: '/index-item/GroupDeal/DiscountInfo?id=3',
						description: '学生专享优惠，洗车保养服务'
					},
					{
						id: 4,
						title: '汽车惠民活动走进商场',
						image: '/static/index/Snipaste_2025-09-03_22-46-43.jpg',
						originalPrice: 499,
						groupPrice: 399,
						participants: 67,
						status: 'active',
						path: '/index-item/GroupDeal/DiscountInfo?id=4',
						description: '商场合作活动，全方位汽车服务'
					}
				];
			},
			
			// 测试API连接状态
			async testApiConnection() {
				try {
					const response = await this.getGroupBuyingListApi({
						pageNum: 1,
						pageSize: 1
					});
					return true;
				} catch (error) {
					return false;
				}
			},
			
			// 跳转到消息/记录页面（使用已存在的页面）
			goToMessage() {
				uni.navigateTo({
					url: '/index-item/MessageCenter/message',
					success: () => {
						console.log('跳转到记录页面');
					},
					fail: (err) => {
						console.error('跳转失败:', err);
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none'
						});
					}
				});
			},
			// 服务分类点击事件
			onServiceClick(service) {
				console.log('点击服务分类:', service);
				// 这里可以根据服务类型进行不同的处理
				switch(service.type) {
					case 'repair':
						this.navigateToService(service.path, service);
						break;
					case 'maintenance':
						this.navigateToService(service.path, service);
						break;
					case 'carwash':
						this.navigateToService(service.path, service);
						break;
					case 'gas':
						this.navigateToGasStation();
						break;
					default:
						uni.showToast({
							title: `跳转到${service.name}`,
							icon: 'none'
						});
				}
			},
			// 跳转到服务页面
			navigateToService(path, service) {
				// 检查页面是否存在，如果不存在则显示提示
				uni.navigateTo({
					url: path,
					fail: () => {
						uni.showToast({
							title: `${service.name}功能开发中`,
							icon: 'none'
						});
					}
				});
			},
			// 跳转到加油/附近门店页面
			navigateToGasStation() {
				uni.navigateTo({
					url: '/index-item/gas-station/oiling'
				});
			},
			// 团购活动点击事件
			onGroupBuyClick(activity) {
				console.log('点击团购活动:', activity);
				// 保存当前活动ID，用于返回时刷新数据
				uni.setStorageSync('currentGroupBuyId', activity.id);
				uni.navigateTo({
					url: activity.path,
					fail: () => {
						uni.showModal({
							title: activity.title,
							content: activity.description,
							showCancel: false,
							confirmText: '知道了'
						});
					}
				});
			},
			// 查看更多团购
			onViewMoreGroupBuy() {
				uni.navigateTo({
					url: '/index-item/GroupDeal/Discount',
					success: () => {
						console.log('跳转到团购列表页面');
					},
					fail: (err) => {
						console.error('跳转失败:', err);
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none'
						});
					}
				});
			},
			
			// 查看更多附近门店
			onViewMoreNearbyStore() {
				uni.navigateTo({
					url: '/index-item/vehicle_repair/nearbyStore/nearbyStore'
				});
			},
			
			// 启动数据检查定时器
			startDataCheckTimer() {
				// 每2秒检查一次全局数据更新
				this.dataCheckTimer = setInterval(() => {
					const app = getApp();
					if (app.globalData && app.globalData.groupBuyDataUpdated) {
						this.updateGroupBuyData();
					}
				}, 2000);
			},
			
			// 更新团购数据
			updateGroupBuyData() {
				const app = getApp();
				if (app.globalData && app.globalData.groupBuyDataUpdated) {
					// 直接更新对应团购的参与人数
					const activity = this.groupBuyActivities.find(item => item.id == app.globalData.updatedGroupBuyId);
					if (activity) {
						activity.participants = app.globalData.updatedParticipants;
						// 强制触发视图更新
						this.$forceUpdate();
					} else {
						// 如果找不到对应活动，则刷新整个列表
						this.loadGroupBuyActivities();
					}
					
					// 清除更新标记
					app.globalData.groupBuyDataUpdated = false;
					app.globalData.updatedGroupBuyId = null;
					app.globalData.updatedParticipants = null;
				}
			},
			
			// 点击位置信息跳转到选择地址页面
			onLocationClick() {
				uni.navigateTo({
					url: '/index-item/other/choose-address/choose-address',
					success: () => {
						console.log('跳转到选择地址页面');
					},
					fail: (err) => {
						console.error('跳转失败:', err);
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none'
						});
					}
				});
			},
			// 刷新位置
			onRefreshLocation() {
				uni.showLoading({
					title: '正在刷新位置...'
				});
				// 模拟获取位置
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '位置已更新',
						icon: 'success'
					});
				}, 1500);
			},
			// 地图标记点击事件
			onMarkerTap(e) {
				const markerId = e.detail.markerId;
				const marker = this.mapData.markers.find(m => m.id === markerId);
				if (marker) {
					uni.showModal({
						title: marker.title,
						content: `类型：${this.getMarkerTypeText(marker.type)}`,
						showCancel: false,
						confirmText: '知道了'
					});
				}
			},
			// 获取标记类型文本
			getMarkerTypeText(type) {
				const typeMap = {
					'government': '政府机构',
					'shopping': '购物中心',
					'education': '教育机构'
				};
				return typeMap[type] || '未知类型';
			},
			// 地图区域变化事件
			onRegionChange(e) {
				console.log('地图区域变化：', e);
				if (e.type === 'end') {
					// 区域变化结束时更新缩放级别
					this.mapData.scale = e.detail.scale;
					console.log('当前缩放级别：', this.mapData.scale);
				}
			},
			// 地图更新事件
			onMapUpdated(e) {
				console.log('地图更新：', e);
			},
			// 地图加载完成事件
			onMapLoad() {
				console.log('地图加载完成');
				// 初始化地图上下文
				this.mapContext = uni.createMapContext('homeMap', this);
			}
		},
		// 生命周期
		mounted() {
			// 页面加载时初始化地图
			this.$nextTick(() => {
				console.log('首页地图初始化');
			});
		},
		// 页面显示时检查是否有城市选择结果
		onShow() {
			// 检查是否有从选择地址页面返回的城市信息
			const selectedCity = uni.getStorageSync('selectedCity');
			if (selectedCity) {
				this.userLocation.address = selectedCity.address;
				this.userLocation.latitude = selectedCity.latitude;
				this.userLocation.longitude = selectedCity.longitude;
				// 清除存储的城市信息
				uni.removeStorageSync('selectedCity');
			}
		}
	}
</script>

<style scoped>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
		position: relative;
		/* #ifdef H5 */
		padding-bottom: 140rpx; /* 为自定义TabBar留出空间 */
		/* #endif */
		/* #ifdef APP-PLUS */
		padding-bottom: 140rpx; /* 为自定义TabBar留出空间 */
		/* #endif */
		/* #ifdef MP-WEIXIN */
		padding-bottom: 140rpx; /* 为自定义TabBar留出空间 */
		/* #endif */
	}

	/* 统一背景区域 */
	.main-background {
		background-image: url('/static/index/图层 1.png');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		position: relative;
		padding-bottom: 100rpx; /* 为服务分类卡片留出空间 */
	}

	/* 顶部状态栏和导航栏 */
	.header {
		padding-top: var(--status-bar-height);
	}

	.status-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8rpx 30rpx;
		color: white;
		font-size: 24rpx;
	}

	.signal {
		display: flex;
		align-items: center;
		gap: 4rpx;
	}

	.signal-dot {
		width: 8rpx;
		height: 8rpx;
		border-radius: 50%;
		border: 1px solid white;
	}

	.signal-dot.filled {
		background-color: white;
	}

	.battery {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.battery-icon {
		width: 32rpx;
		height: 16rpx;
		border: 1px solid white;
		border-radius: 2rpx;
		position: relative;
	}

	.battery-icon::after {
		content: '';
		position: absolute;
		right: -4rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 0;
		height: 0;
		border-left: 4rpx solid white;
		border-top: 4rpx solid transparent;
		border-bottom: 4rpx solid transparent;
	}

	.nav-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx 30rpx;
	}

	.nav-icon {
		width: 48rpx;
		height: 48rpx;
	}

	.nav-title {
		color: white;
		font-size: 36rpx;
		font-weight: bold;
	}

	.nav-right {
		width: 48rpx;
		height: 48rpx;
	}

	/* 位置/搜索栏 */
	.location-bar {
		padding: 30rpx;
		margin: 20rpx;
		border-radius: 20rpx;
		/* box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1); */
	}

	.location-input {
		display: flex;
		align-items: center;
		background-color: #f8f9fa;
		padding: 20rpx;
		border-radius: 15rpx;
	}

	.location-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 16rpx;
	}

	.location-text {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}

	.refresh-section {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.refresh-icon {
		width: 24rpx;
		height: 24rpx;
	}

	.refresh-text {
		font-size: 24rpx;
		color: #666;
	}

	/* 服务分类 - 独立白色卡片 */
	.service-section {
		background-color: white;
		margin: -110rpx 20rpx 30rpx; /* 负边距让卡片与背景图片重合 */
		border-radius: 20rpx;
		padding: 40rpx 30rpx 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		position: relative;
		z-index: 10;
	}

	.service-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20rpx;
	}

	.service-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16rpx;
	}

	.service-icon {
		width: 120rpx;
		height: 120rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.service-icon.blue {
		background: linear-gradient(135deg, #4070f4 0%, #0058cb 100%);
	}

	.service-icon.orange {
		background: linear-gradient(135deg, #fbb81c 0%, #f5a029 100%);
	}

	.service-icon.green {
		background: linear-gradient(135deg, #abfe3e 0%, #08c732 100%);
	}

	.service-icon.light-blue {
		background: linear-gradient(135deg, #0fb5f1 0%, #2ea8f9 100%);
	}

	.service-img {
		width: 60rpx;
		height: 60rpx;
	}

	.service-label {
		font-size: 24rpx;
		color: #333;
		text-align: center;
	}

	/* 附近加油站 */
	.gas-station-section {
		background-color: white;
		margin: 0 20rpx 30rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 20rpx;
	}

	.section-title {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.subtitle-text {
		font-size: 24rpx;
		color: #666;
	}

	.more-link {
		font-size: 24rpx;
		color: #666;
	}

	.map-container {
		width: 100%;
		height: 400rpx;
		border-radius: 15rpx;
		overflow: hidden;
	}

	.map-component {
		width: 100%;
		height: 100%;
	}
	
	/* App端地图特殊样式 */
	/* #ifdef APP-PLUS */
	.map-component {
		background-color: #f0f0f0;
		min-height: 400rpx;
	}
	/* #endif */

	/* 优惠团购 */
	.group-buy-section {
		background-color: white;
		margin: 0 20rpx 30rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.group-buy-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20rpx;
		padding: 10rpx 0;
	}

	.group-buy-item {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
		background-color: #fff;
		border-radius: 15rpx;
		padding: 16rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		width: 100%;
	}

	.group-buy-img {
		width: 100%;
		height: 160rpx;
		border-radius: 10rpx;
	}

	.group-buy-text {
		font-size: 26rpx;
		color: #333;
		line-height: 1.4;
		font-weight: 500;
	}

	.group-buy-price {
		display: flex;
		align-items: center;
		gap: 12rpx;
	}

	.original-price {
		font-size: 22rpx;
		color: #999;
		text-decoration: line-through;
	}

	.group-price {
		font-size: 28rpx;
		color: #ff4444;
		font-weight: bold;
	}

	.group-buy-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.participants {
		font-size: 22rpx;
		color: #666;
	}

	/* 加载状态 */
	.loading-state {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 40rpx 0;
		grid-column: 1 / -1;
	}

	/* 空状态 */
	.empty-state {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 40rpx 0;
		grid-column: 1 / -1;
		color: #999;
		font-size: 28rpx;
	}


</style>
